import React from'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import { useNavigate } from 'react-router-dom';
const itemsData = [
  {
    category: '限时兑换',
    timeLeft: '13 : 50 : 55',
    items: [
      {
        name: '夏季必备简约桌面风扇',
        price: '200币',
        originalPrice: '250-',
        imageUrl: 'https://img2.baidu.com/it/u=2095022025,1031125353&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=300'
      },
      {
        name: '北欧风格大表盘壁挂时钟',
        price: '255币',
        originalPrice: '325-',
        imageUrl: 'https://img0.baidu.com/it/u=1994436871,3895204449&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500'
      },
      {
        name: '拍照神器玻璃水晶球家庭摆件',
        price: '100币',
        originalPrice: '125-',
        imageUrl: 'https://img1.baidu.com/it/u=1233618609,2773105882&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666'
      },
      {
        name: '夏季必备简约桌面风扇',
        price: '200币',
        originalPrice: '250-',
        imageUrl: 'https://img2.baidu.com/it/u=2095022025,1031125353&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=300'
      }
    ]
  },
  {
    category: '近期热门',
    items: [
      {
        name: '夏季必备简约桌面风扇',
        price: '200币',
        originalPrice: '250-',
        imageUrl: 'https://img2.baidu.com/it/u=2095022025,1031125353&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=300'
      },
      {
        name: '北欧风格大表盘壁挂时钟',
        price: '255币',
        originalPrice: '325-',
        imageUrl: 'https://img0.baidu.com/it/u=1994436871,3895204449&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500'
      },
      {
        name: '拍照神器玻璃水晶球家庭摆件',
        price: '100币',
        originalPrice: '125-',
        imageUrl: 'https://img1.baidu.com/it/u=1233618609,2773105882&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666'
      },
      {
        name: '夏季必备简约桌面风扇',
        price: '200币',
        originalPrice: '250-',
        imageUrl: 'https://img2.baidu.com/it/u=2095022025,1031125353&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=300'
      }
    ]
  },
  {
    category: '猜你喜欢',
    items: [
      {
        name: '夏季必备简约桌面风扇',
        price: '250币',
        imageUrl: 'https://img2.baidu.com/it/u=2095022025,1031125353&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=300'
      },
      {
        name: '北欧风格大表盘壁挂时钟',
        price: '120币',
        imageUrl: 'https://img0.baidu.com/it/u=1994436871,3895204449&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500'
      },
      {
        name: '拍照神器玻璃水晶球家庭摆件',
        price: '88币',
        imageUrl: 'https://img1.baidu.com/it/u=1233618609,2773105882&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666'
      },
      {
        name: '夏季必备简约桌面风扇',
        price: '250币',
        imageUrl: 'https://img2.baidu.com/it/u=2095022025,1031125353&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=300'
      }
    ]
  }
];

const SmallItem = ({ item }) => {
  return (
    <div style={{ margin: '10px', textAlign: 'center' }}>
      <img src={item.imageUrl} alt={item.name} style={{ width: '100px', height: '100px' }} />
      <p>{item.name}</p>
      <p style={{ color:'red', fontWeight: 'bold' }}>{item.price}</p>
      {item.originalPrice && <p style={{ textDecoration: 'line-through', color: 'gray' }}>{item.originalPrice}</p>}
    </div>
  );
};

const LargeItem = ({ item }) => {
  return (
    <div style={{ margin: '10px', border: '1px solid #ddd', borderRadius: '5px', overflow: 'hidden' }}>
      <img src={item.imageUrl} alt={item.name} style={{ width: '100%', height: '200px' }} />
      <div style={{ padding: '10px' }}>
        <p>{item.name}</p>
        <p style={{ color:'red', fontWeight: 'bold' }}>{item.price}</p>
      </div>
    </div>
  );
};

const Category = ({ category, items, timeLeft }) => {
  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderBottom: '1px solid #ddd', padding: '10px' }}>
        <h3>{category}</h3>
        {timeLeft && <p>{timeLeft}</p>}
        <a href="#">更多</a>
      </div>
      {category === '猜你喜欢'? (
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '10px' }}>
          {items.map((item, index) => (
            <LargeItem key={index} item={item} />
          ))}
        </div>
      ) : (
        <div style={{ display: 'flex', overflowX: 'auto' }}>
          {items.map((item, index) => (
            <SmallItem key={index} item={item} />
          ))}
        </div>
      )}
    </div>
  );
};
// const navigate = useNavigate();

const App = () => {
  return (
    <div>
      <div style={{  padding: '10px', textAlign: 'center' }}>
        <h2>兑换商城</h2>
        <div style={{}}>
                        <Swiper
                            spaceBetween={30}
                            slidesPerView={1}
                            loop={true}
                            autoplay={{
                                delay: 1000,
                                disableOnInteraction: false
                            }}

                        >
                            <SwiperSlide>
                                <img src="https://img1.baidu.com/it/u=2729427911,537666998&fm=253&fmt=auto&app=138&f=JPEG?w=970&h=500" alt="垃圾回收广告1" style={{ width: '100%', height: 'auto', display: 'block' }} />
                            </SwiperSlide>
                            <SwiperSlide>
                                <img src="https://img0.baidu.com/it/u=1730201319,825445961&fm=253&fmt=auto&app=138&f=JPEG?w=921&h=500" alt="垃圾回收广告2" style={{ width: '100%', height: 'auto', display: 'block' }} />
                            </SwiperSlide>
                            <SwiperSlide>
                                <img src="https://img2.baidu.com/it/u=3518731668,665515724&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=326" alt="垃圾回收广告3" style={{ width: '100%', height: 'auto', display: 'block' }} />
                            </SwiperSlide>
                        </Swiper>
                    </div>
      </div>
      {itemsData.map((categoryData, index) => (
        <Category key={index} category={categoryData.category} items={categoryData.items} timeLeft={categoryData.timeLeft}  />
      ))}
      
    </div>
  );
};

export default App;